<template>

    <div :id="chartId" style="width: 100%;height:400px;margin: 0 auto"></div>
</template>

<script>
    import zhuanliSerive from '@/service/zhuan_li'

    export default {
        name: "chart1",
        components: {
            //someComponent
        },
        props: ['chartId', 'chartYjryData', 'chartLwData', 'centerData', 'lwxzList'],
        data() {
            return {
                msg: "Hello Vue.js",
                chartDiv:null,
            }
        },
        computed: {},
        watch: {},
        mounted: function () {
            this.loadData();
        },
        methods: {
            loadData(){
                this.chartDiv = echarts.init(document.getElementById(this.chartId));
                this.chartDiv.showLoading({
                    text: '数据正在加载...',
                    textStyle: { fontSize : 30 , color: '#444' },
                    effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
                });
                zhuanliSerive.getZlList({
                    columns:['shen_qing_ren','count:id'],
                    group:['shen_qing_ren'],
                    order:[['count:id',1]],
                    filter:[['shen_qing_ren',11]],
                    pageSize:10
                }).then(res=>{
                    this.chartData = res.data;
                    this.initData()
                    this.chartDiv.hideLoading();
                })

            },
            initData(){
                const nameDataSet = new Set();
                const xDataSet = new Set();
                this.chartData.forEach(item=>{
                    // nameDataSet.add(item.qi_kan_hui_yi_ming);
                    xDataSet.add(item.shen_qing_ren);
                })
                const nameDataArr = Array.from(nameDataSet);
                const xDataArr = Array.from(xDataSet);
                const dataArr = []
                const dataArrItem = Array.apply(null,{length:xDataArr.length})
                xDataArr.forEach((xItem,xIndex)=>{
                    this.chartData.forEach(item=>{
                        if(item.shen_qing_ren === xItem){
                            dataArrItem[xIndex] = item._count_id;
                        }
                    })
                })
                dataArr.push(dataArrItem);
                this.initChart({nameDataArr,xDataArr,dataArr})
            },
            initChart({nameDataArr,xDataArr,dataArr}){

                this.chartDiv = echarts.init(document.getElementById(this.chartId));

                const seriesData = dataArr.map((item,index)=>{
                    return {
                        "name": nameDataArr[index],
                        "type": "bar",
                        "barWidth": "20px",
                        "data": dataArr[index]
                    }
                })

                const option = {
                    "color": ["#48abfe", "#00d06e", "#ffdcba", "#3be294"],
                    "tooltip": {
                        "trigger": "axis",
                        "textStyle":{
                            "align":"left"
                        }
                    },
                    "legend": {
                        "itemWidth": 20,
                        "itemHeight": 6,
                        "bottom": "1%",
                    },
                    "grid": {
                        "top": "10%",
                        "left": "3%",
                        "right": "10%",
                        "bottom": "15%",
                        "containLabel": true
                    },
                    "yAxis": [{
                        // "name": "次",
                        "type": "value",
                        // "min": 0,
                        // "logBase":8,
                        "axisLabel": {
                            "show": true,
                            "interval": "auto",
                            "formatter": "{value} "
                        },
                        "splitLine": {
                            "show": true
                        },
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "show": false
                        },
                        "show": true
                    }],
                    "xAxis": [{
                        "type": "category",
                        "axisLabel": {
                            "interval": 0,
                            "show": true,
                            "splitNumber": 15,
                            "textStyle": {
                                "fontSize": 12,
                                "color": "#656565"
                            },
                            "rotate": -15 //倾斜角度
                        },
                        "axisLine": {
                            "show": false
                        },
                        "axisTick": {
                            "show": false
                        },
                        "data": xDataArr
                    }],
                    "series": seriesData
                }

                this.chartDiv.setOption(option);
                  window.addEventListener('resize',()=>{
                    this.chartDiv.resize();
                })
            }
        }
    }
</script>

<style scoped>

</style>
